<template>
  <div class="tech-title-container" :class="['tech-title--size-' + size]">
    <h1 v-if="level === 1" class="tech-title-text">
      <slot></slot>
      <span class="tech-title-underline" v-if="underline"></span>
    </h1>
    <h2 v-else-if="level === 2" class="tech-title-text">
      <slot></slot>
      <span class="tech-title-underline" v-if="underline"></span>
    </h2>
    <h3 v-else-if="level === 3" class="tech-title-text">
      <slot></slot>
      <span class="tech-title-underline" v-if="underline"></span>
    </h3>
    <h4 v-else-if="level === 4" class="tech-title-text">
      <slot></slot>
      <span class="tech-title-underline" v-if="underline"></span>
    </h4>
    <h5 v-else-if="level === 5" class="tech-title-text">
      <slot></slot>
      <span class="tech-title-underline" v-if="underline"></span>
    </h5>
    <h6 v-else class="tech-title-text">
      <slot></slot>
      <span class="tech-title-underline" v-if="underline"></span>
    </h6>
  </div>
</template>

<script>
export default {
  name: 'TechTitle',
  props: {
    level: {
      type: Number,
      default: 2,
      validator: value => {
        return value >= 1 && value <= 6
      }
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => {
        return ['small', 'medium', 'large', 'xlarge'].includes(value)
      }
    },
    underline: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.tech-title-container {
  margin-bottom: 1.5rem;
}

.tech-title-text {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  margin: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 5s infinite;
  background-size: 200% 100%;
}

.tech-title--size-small .tech-title-text {
  font-size: 1.2rem;
}

.tech-title--size-medium .tech-title-text {
  font-size: 1.8rem;
}

.tech-title--size-large .tech-title-text {
  font-size: 2.5rem;
}

.tech-title--size-xlarge .tech-title-text {
  font-size: 3.5rem;
}

.tech-title-underline {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 3px;
}

.tech-title-underline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: white;
  filter: blur(3px);
  animation: underline-highlight 3s linear infinite;
}

@keyframes text-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes underline-highlight {
  0% {
    left: 0;
    opacity: 0.5;
  }
  100% {
    left: 100%;
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .tech-title--size-large .tech-title-text {
    font-size: 2rem;
  }
  
  .tech-title--size-xlarge .tech-title-text {
    font-size: 2.5rem;
  }
}
</style> 